<template>
  <scroll-view class="list-view" :data="data" ref="scrollViews" :probeType="probeType">
    <ul>
      <li v-for="(group, index) in data" class="list-group" :key="index" ref="scrollGroup">
        <h2 class="list-group-title">{{group.title}}</h2>
        <ul>
          <li v-for="(item, ind) in group.item" class="list-group-item" :key="ind" @click="selectItem(item)">
            <img v-lazy="item.avatar" alt="" class="avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shotcut" @touchstart="shotTouchStart">
      <ul>
        <li class="item" v-for="(title, index) in cutIndexList" :data-index="index" :key="index">{{title}}</li>
      </ul>
    </div>
  </scroll-view>
</template>

<script>
import { getDataProp } from 'util/dom.js'
import scrollView from '../../base/scroll/scrollView'
export default {
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  created() {
    this.probeType = 3
  },
  components: {
    scrollView
  },
  computed: {
    cutIndexList() {
      return this.data.map(group => {
        return group.title.substr(0, 1)
      })
    }
  },
  methods: {
    // touch事件
    shotTouchStart(e) {
      let anchorIndex = getDataProp(e.target, 'index')
      console.log(this.$refs.scrollGroup[anchorIndex])
      this.$refs.scrollViews.scrollToElement(
        this.$refs.scrollGroup[anchorIndex],
        0
      )
    },
    selectItem(item) {
      this.$emit('selected', item)
    }
  }
}
</script>

<style scoped lang="stylus">
@import '../../assets/stylus/variable';

.list-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: $color-background;

  ul {
    position: relative;
  }

  .list-group {
    padding-bottom: 30px;

    .list-group-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: $font-size-samll;
      color: $color-text-l;
      background: $color-highlight-background;
    }

    .list-group-item {
      display: flex;
      align-items: center;
      padding: 20px 0 0 30px;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .name {
        margin-left: 20px;
        color: $color-text-l;
        font-size: $font-size-medium;
      }
    }
  }

  .list-shotcut {
    position: absolute;
    z-index: 30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: $color-background-d;
    font-family: Helvetica;

    .item {
      padding: 3px;
      line-height: 1;
      color: $color-text-l;
      font-size: $font-size-smal;

      &.current {
        color: $color-theme;
      }
    }
  }

  .list-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .fixed-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: $font-size-small;
      color: $color-text-l;
      background: $color-highlight-background;
    }
  }
}
</style>